<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PPT Viewer</title>
    <link rel="stylesheet" href="./css/pptxjs.css" />
    <link rel="stylesheet" href="./css/nv.d3.min.css" />
  </head>

  <body>
    <div
      id="loader"
      style="
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <div
        class="spinner"
        style="
          border: 4px solid rgba(255, 255, 255, 0.3);
          border-top-color: #fff;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 1s linear infinite;
        "
      ></div>
    </div>

    <div id="container"></div>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./js/jszip.min.js"></script>
    <script src="./js/filereader.js"></script>
    <script src="./js/d3.min.js"></script>
    <script src="./js/nv.d3.min.js"></script>
    <script src="./js/pptxjs.js"></script>
    <script src="./js/divs2slides.js"></script>
    <script src="./js/jquery.fullscreen-min.js"></script>
    <script>
      $(function () {
        const pptxFileUrl = new URLSearchParams(window.location.search).get('file')
        if (pptxFileUrl) {
          // 显示加载动画
          $('#loader').show()
          $('#container').pptxToHtml({
            pptxFileUrl: pptxFileUrl,
            slideMode: true,
            slidesScale: 80,
            slideModeConfig: {
              //on slide mode (slideMode: true)
              first: 1,
              nav: true /** true,false : show or not nav buttons*/,
              navTxtColor: 'white' /** color */,
              navNextTxt: '&#8250;', //">"
              navPrevTxt: '&#8249;', //"<"
              showPlayPauseBtn: true /** true,false */,
              keyBoardShortCut: true /** true,false */,
              showSlideNum: true /** true,false */,
              showTotalSlideNum: true /** true,false */,
              autoSlide: true /** false or seconds (the pause time between slides) , F8 to active(keyBoardShortCut: true) */,
              randomAutoSlide: false /** true,false ,autoSlide:true */,
              loop: true /** true,false */,
              background: '#fff' /** false or color*/,
              transition:
                'default' /** transition type: "slid","fade","default","random" , to show transition efects :transitionTime > 0.5 */,
              transitionTime: 1 /** transition time in seconds */,
            },
            loaded: function (e) {
              console.log('PPT loaded', e)
            },
            onRenderComplete: function () {
              console.log('PPT rendering complete')
              // 隐藏加载动画
              $('#loader').hide()
            },
            onError: function (error) {
              console.error('Error rendering PPT:', error)
              alert('ppt加载失败，请刷新重试')
              // 隐藏加载动画
              $('#loader').hide()
            },
          })
        }
      })
    </script>
    <style>
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </body>
</html>
